<template>
  <div>
<!--    时间选择器-->
    <div style="float: left;margin-bottom: 20px">
    <el-time-select
      v-model="value"
      :picker-options="{
    start: '00:00',
    step: '01:00',
    end: '23:59'
  }"
      placeholder="选择时间">
    </el-time-select>

    <el-button type="primary" @click="search">查询</el-button>
    </div>


    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="土壤温度">
              <span>{{ props.row.gtSoilTemperature }}</span>
            </el-form-item>
            <el-form-item label="土壤湿度">
              <span>{{ props.row.gtSoilMoisture }}</span>
            </el-form-item>
            <el-form-item label="电导率">
              <span>{{ props.row.gtConductivity }}</span>
            </el-form-item>
            <el-form-item label="土壤PH">
              <span>{{ props.row.gtSoilPh }}</span>
            </el-form-item>
            <el-form-item label="风向">
              <span>{{ props.row.gtWindDirection }}</span>
            </el-form-item>
            <el-form-item label="风速">
              <span>{{ props.row.gtWindSpeed }}</span>
            </el-form-item>
            <el-form-item label="大气温度">
              <span>{{ props.row.gtAtmosphericTemperature }}</span>
            </el-form-item>
            <el-form-item label="大气湿度">
              <span>{{ props.row.gtAtmosphericHumidity }}</span>
            </el-form-item>
            <el-form-item label="降雨量">
              <span>{{ props.row.gtRainfall }}</span>
            </el-form-item>
            <el-form-item label="大气压力">
              <span>{{ props.row.gtAtmosphericPressure }}</span>
            </el-form-item>
            <el-form-item label="PM2.5">
              <span>{{ props.row.gtPm2 }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="土壤温度"
        prop="gtSoilTemperature">
      </el-table-column>
      <el-table-column
        label="土壤湿度"
        prop="gtSoilMoisture">
      </el-table-column>
      <el-table-column
        label="土壤PH"
        prop="gtSoilPh">
      </el-table-column>
      <el-table-column
        label="电导率"
        prop="gtConductivity">
      </el-table-column>
    </el-table>

    <div class="block" style="float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 9, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Total">
      </el-pagination>
    </div>

  </div>

</template>

<script>
import axios from "axios";
export default {
  name: "gsoilList",
  data() {
    return {
      tableData: [{
        gtId: '',
        gtSoilTemperature: '',
        gtSoilMoisture: '',
        gtConductivity: '',
        gtSoilPh: '',
        gtWindDirection: '',
        gtWindSpeed: '',
        gtAtmosphericTemperature: '',
        gtAtmosphericHumidity:'',
        gtRainfall:'',
        gtAtmosphericPressure:'',
        gtPm2:'',
        gtPm10:'',
        gtEvaporationCapacity:'',
        gtMinute:''
      }],
      pageSize: 1,
      currentPage: 1,
      Total: 0,
      value: ''
    }
  },
  methods: {
    PageSelect(){
      axios.get(`/api/RtimeData/qshow?currentPage=${this.currentPage}&pageSize=${this.pageSize}`)
        .then(({data}) => {
          if (data.message=='查询成功')
          {
            this.tableData=data.data.records
            this.Total=data.data.total
            // this.$message({
            //   message: data.message,
            //   type: "success"
            // })
          }
          else {
            this.$message({
              message: data.message,
              type: "warning"
            })
            this.PageSelect();
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    handleSizeChange(val) {
      this.pageSize=val
      console.log(`每页 ${val} 条`);
      this.PageSelect();
    },
    handleCurrentChange(val) {
      this.currentPage=val
      console.log(`当前页: ${val}`);
      this.PageSelect();
    },
    search(){
      this.currentPage=parseInt(this.value)+1

      this.PageSelect();
    }
  },
  created() {
    this.PageSelect();
  }
}
</script>

<style scoped>

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

</style>
